<template>
  <div class="test-echarts" ref="echartsRef"> </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import graph from './graph.json'

const echartsRef = ref()

onMounted(() => {
  init()
})

const init = () => {
  var chartDom = echartsRef.value
  var myChart = echarts.init(chartDom)
  var option

  myChart.showLoading()
  myChart.hideLoading()
  option = {
    tooltip: {},
    legend: [
      {
        data: graph.categories.map(function (a) {
          return a.name
        })
      }
    ],
    series: [
      {
        name: 'Les Miserables',
        type: 'graph',
        layout: 'force',
        data: graph.nodes,
        links: graph.links,
        categories: graph.categories,
        roam: true,
        label: {
          show: true,
          position: 'right',
          formatter: '{b}'
        },
        labelLayout: {
          hideOverlap: true
        },
        scaleLimit: {
          min: 1,
          max: 5
        },
        zoom: 3,
        lineStyle: {
          color: 'source',
          curveness: 0.3
        }
      }
    ]
  }
  myChart.setOption(option)

  option && myChart.setOption(option)
}
</script>
<style lang="less">
.test-echarts {
  height: 100%;
}
</style>
